<template>
  <div class="el-card form-container is-never-shadow">
    <el-steps :active="active" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>
    <div style="margin-top: 50px">
      <el-form :model="promotionForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" size="mini" style="width: 600px; margin-left: 30px" v-if="active == 1">
        <el-form-item label="商品分类：" prop="region">
          <div class="block">
            <el-cascader v-model="ruleForm.region" :options="categoryList" :props="categoryProps"></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="商品名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="副标题：" prop="date1">
          <el-input v-model="ruleForm.date1"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌：" prop="date2">
          <el-select v-model="ruleForm.date2" placeholder="请选择品牌">
            <el-option v-for="item in brand" :key="item.value" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.textarea"> </el-input>
        </el-form-item>
        <el-form-item label="商品货号：">
          <el-input v-model="ruleForm.goods1"></el-input>
        </el-form-item>
        <el-form-item label="商品售价：">
          <el-input v-model="ruleForm.goods2"></el-input>
        </el-form-item>
        <el-form-item label="市场价：">
          <el-input v-model="ruleForm.goods3"></el-input>
        </el-form-item>
        <el-form-item label="商品库存：">
          <el-input v-model="ruleForm.goods4"></el-input>
        </el-form-item>
        <el-form-item label="计量单位：">
          <el-input v-model="ruleForm.goods5"></el-input>
        </el-form-item>
        <el-form-item label="商品重量："> <el-input v-model="ruleForm.goods6" style="width: 300px"></el-input> 克 </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="ruleForm.goods7"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="promotionForm" :rules="rules" ref="promotionForm" label-width="120px" class="demo-ruleForm" size="mini" style="width: 600px; margin-left: 30px" v-if="active == 2">
        <el-form-item label="赠送积分：">
          <el-input v-model="promotionForm.integral"></el-input>
        </el-form-item>
        <el-form-item label="赠送成长值：">
          <el-input v-model="promotionForm.value"></el-input>
        </el-form-item>
        <el-form-item label="积分购买限制：">
          <el-input v-model="promotionForm.purchase"></el-input>
        </el-form-item>
        <el-form-item label="预告商品：">
          <el-switch v-model="promotionForm.notice"> </el-switch>
        </el-form-item>
        <el-form-item label="商品上架：">
          <el-switch v-model="promotionForm.shelf"> </el-switch>
        </el-form-item>
        <el-form-item label="商品推荐：">
          <span style="margin-right: 10px">新品</span> <el-switch style="margin-right: 10px" v-model="promotionForm.products"> </el-switch> <span style="margin-right: 10px">推荐</span>
          <el-switch style="margin-right: 10px" v-model="promotionForm.recommend"> </el-switch>
        </el-form-item>
        <el-form-item label="服务保证：">
          <el-checkbox-group v-model="promotionForm.checkList">
            <el-checkbox label="无忧退货"></el-checkbox>
            <el-checkbox label="快速退货"></el-checkbox>
            <el-checkbox label="免费包邮"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="详细页标题：">
          <el-input v-model="promotionForm.title"></el-input>
        </el-form-item>
        <el-form-item label="详细页描述：">
          <el-input v-model="promotionForm.describe"></el-input>
        </el-form-item>
        <el-form-item label="商品关键字：">
          <el-input v-model="promotionForm.keyword"></el-input>
        </el-form-item>
        
      </el-form>
    </div>
    <el-button style="margin-top: 12px" @click="next">下一步，填写商品促销</el-button>
  </div>
</template>

<script>
import { fetchGoodsBrand, fetchGoodsClassification } from '@/api/api'

export default {
  data() {
    return {
      // 商品分类 input  格式化
      categoryProps: {
        value: 'name',
        label: 'name',
        children: 'productAttributeList',
        expandTrigger: 'click',
      },
      // 商品分类 input
      categoryList: [],
      active: 1,
      // 商品品牌 input
      brand: [],
      // 商品促销
      promotionForm: {
        integral: 0,
        value: 0,
        purchase: 0,
        notice: false,
        shelf: false,
        products: false,
        recommend: false,
        checkList: [],
        title:'',
        describe:'',
        keyword:'',
      },
      // 商品信息
      ruleForm: {
        // 商品名称
        name: '',
        // 商品分类
        region: '',
        // 副标题
        date1: '',
        // 商品品牌
        date2: '',
        // 多选框
        textarea: '',
        // 不校验
        goods1: '',
        goods2: 0,
        goods3: 0,
        goods4: 0,
        goods5: '',
        goods6: 0,
        goods7: 0,
      },
      rules: {
        region: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
        ],
        date1: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
        date2: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
      },
    }
  },
  methods: {
    next() {
      if (this.active++ > 4) this.active = 0
    },
  },
  created() {
    fetchGoodsClassification().then((res) => {
      this.categoryList = res.data
    })
    fetchGoodsBrand().then((res) => {
      this.brand = res.data
    })
  },
}
</script>

<style lang="scss">
.form-container {
  width: 800px;
}
.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px;
  margin: 20px auto;
}
</style>
